<template>
  <div>
    <div class="echart-con">
      <e-charts v-for="list in chartList" :key="list.id" class="box"
                :style="'flex: 1 0 auto; flex-basis:'+form.content.boxWidth+'px;'"
                :options="list"
                :autoResize="true" ref="chart"></e-charts>
    </div>
  </div>
</template>

<script>
  import echartType from '../../mixins/echartType.js';
  import ECharts from 'vue-echarts/components/ECharts.vue';

  export default {
    name: 'EchartLine',
    props: ['form'],
    mixins: [echartType],
    components: {ECharts},
    methods: {
      init() {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          if (!Array.isArray(this.form.originalData)) {
            return {};
          }
          let option = JSON.parse(JSON.stringify(this.form));
          option.tooltip = this.form.tooltip;
          option.xAxis.show = true;
          option.yAxis.show = true;

          this.chartList = [];
          if (this.form.plot.value.length === 0 || this.form.plot.category.length === 0) {
            return false;
          } else {
            this.form.plot.value.forEach(item => {
              let obj = {};
              let barOptions = this.lineData(this.form.plot.category, item);
              obj = Object.assign({}, option, barOptions);
              this.chartList.push(obj);
            });
          }
        }, 50);
      },
      lineData(categoryArr, valueObj) {
        let axisX = categoryArr[0] ? this.axisFun(categoryArr[0].name) : [];
        let axisY = categoryArr[1] ? this.axisFun(categoryArr[1].name) : [];
        let area = {};
        let stack = '';
        let barre = this.form.barre;
        let step = false;
        switch (this.form.echart.line) {
          case 'default':
            area = {};
            break;
          case 'stack':
            stack = 'stack';
            break;
          case 'step':
            step = this.form.line.step;
            break;
          case 'area':
            area = {
              normal: {
                origin: 'auto',
                opacity: 0.5
              }
            };
            break;
          case 'areaStack':
            stack = 'stack';
            area = {
              normal: {
                origin: 'auto',
                opacity: 0.5
              }
            };
            break;
        }
        let orient = 'horizontal';
        let top = 'bottom';
        let left = 'center';
        let gridLeft = 60;
        let gridRight = 60;
        switch (this.form.legend.location) {
          case '0':
            orient = 'horizontal';
            top = 'top';
            left = 'left';
            break;
          case '1':
            orient = 'horizontal';
            top = 'top';
            left = 'center';
            break;
          case '2':
            orient = 'horizontal';
            top = 'top';
            left = 'right';
            break;
          case '3':
            orient = 'vertical';
            top = 'middle';
            left = 'left';
            gridLeft = 100;
            break;
          case '4':
            orient = 'vertical';
            top = 'middle';
            left = 'right';
            gridRight = 100;
            break;
          case '5':
            orient = 'horizontal';
            top = 'bottom';
            left = 'left';
            break;
          case '6':
            orient = 'horizontal';
            top = 'bottom';
            left = 'center';
            break;
          case '7':
            orient = 'horizontal';
            top = 'bottom';
            left = 'right';
            break;
        }
        let lineOption = {
          xAxis: {
            name: categoryArr[0].title,
            data: []
          },
          yAxis: {
            name: valueObj.title,
            type: 'value'
          },
          legend: {
            show: this.form.legend.show,
            type: this.form.legend.type,
            orient: orient,
            top: top,
            left: left,
            data: []
          },
          grid: {
            left: gridLeft,
            right: gridRight
          },
          series: []
        };
        if (barre) {
          lineOption.xAxis.type = 'value';
          lineOption.yAxis.type = 'category';
          lineOption.yAxis.name = categoryArr[0].title;
          lineOption.xAxis.name = valueObj.title;
          lineOption.yAxis.data = axisX;
        } else {
          lineOption.xAxis.data = axisX;
        }
        if (axisY.length === 0) {
          let arr = [];
          this.form.originalData.forEach(list => {
            axisX.forEach((item, index) => {
              if (item === list[categoryArr[0].name]) {
                arr[index] = list[valueObj.name];
              }
            });
          });

          let obj = {
            type: 'line',
            areaStyle: area,
            stack: stack,
            step: step,
            data: arr
          };
          lineOption.series.push(obj);
        } else {
          lineOption.legend.data = axisY;
          axisY.forEach(element => {
            let arr = [];
            this.form.originalData.forEach(list => {
              axisX.forEach((item, index) => {
                if (list[categoryArr[0].name] === item && list[categoryArr[1].name] === element) {
                  arr[index] = list[valueObj.name];
                }
              });
            });
            let obj = {
              type: 'line',
              name: element,
              data: arr,
              areaStyle: area,
              stack: stack,
              step: step,
              smooth: this.form.line.smooth,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  distance: -10,
                  color: '#000',
                  formatter: (params, ticket, callback) => {
                    return this.getFormaterStr(params);
                  }
                }
              }
            };
            lineOption.series.push(obj);
          });
        }
        return lineOption;
      },
      getFormaterStr(paras) {
        let showArr = '';
        this.form.originalData.forEach(list => {
          this.form.plot.tags.forEach(tag => {
            if (
              list[this.form.plot.category[0].name] === paras.name &&
              this.form.plot.category[1].name &&
              list[this.form.plot.category[1].name] === paras.seriesName
            ) {
              showArr += list[tag] + '\n';
            } else if (
              list[this.form.plot.category[0].name] === paras.name &&
              !this.form.plot.category[1].name
            ) {
              showArr += list[tag] + '\n';
            }
          });
        });
        return showArr;
      }
    }
  };
</script>
